<template>
	<G__TopNav/>
	<a-button type="primary">button</a-button>
	<div class="home" @contextmenu="onContextmenu">
		<img alt="Vue logo" src="../assets/logo.png">
		<!--<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>-->
		<div class="x">Michael Ray</div>
		<div class="x" @click="openNewWindow">打开新窗口()url</div>
		<div class="x" @click="loadFile">loadFile 本地文件</div>
		<div class="x" @click="openVue">打开新窗口文件Vue</div>
		<div class="x" @click="open2">预加载之后打开</div>
		<div @click="test2">和主进程通信</div>
		<div @click="onNotice">消息通知</div>
		<div @click="onLog">log</div>
		<div @click="onLogToServer">log发送到远程</div>
		<div @click="getData">获取data</div>
		<div>
			<a @click="sendData">发送Data</a>
		</div>
		<div @click="getAllRender">获取所有渲染进程id</div>
	</div>
</template>

<script lang="ts" setup>
import log from 'electron-log';
import { getCurrentInstance, ComponentInternalInstance } from 'vue'
// eslint-disable-next-line no-redeclare
import { ipcRenderer } from "electron";
const {proxy} = getCurrentInstance() as ComponentInternalInstance
const $store = (proxy as any).$store;
const $db = (proxy as any).$db;
// eslint-disable-next-line @typescript-eslint/no-var-requires
// const Store = require('electron-store');
import Store from 'electron-store';

function onLog() {
	log.transports.file.file = 'e:/temp/myLog.log'
	// log.transports.file.level = false
	log.error("error");
	log.warn("warn");
	log.info("info");
	log.verbose("verbose");
	log.debug("debug");
	log.silly("silly");

	interface IDemo {
		x: number
	}
}

function getAllRender() {
	ipcRenderer.send('getAllRender'); // 通知主进程打开窗口
}

function getData() {
	$db.loadDatabase(); // 从数据库加载数据,
	console.log('$db', $db)

	$db.find({}, (err: any, newDoc: any) => {
		console.log('err', err)
		console.log('newDoc', newDoc)
	})
}

function sendData() {
	localStorage.setItem('x', '123');

	$db.insert({
		name: 'michael'
	}, (err: any, newDoc: any) => {
		console.log('err', err)
		console.log('newDoc', newDoc)
	})
}

function onLogToServer() {
	log.transports.remote.level = 'warn';
	log.transports.remote.url = 'http://127.0.0.1:8360/wechat/notice/'
	log.warn('Some problem appears', { error: 123 });
}
</script>

<script lang="ts">
import {
	defineAsyncComponent,
	defineComponent,
} from 'vue'
import {
	BrowserWindow,
	// dialog
} from "@electron/remote";
import path from "path";
// import HelloWorld from "../components/HelloWorld.vue";
import { ipcRenderer } from "electron";
import G__TopNav from "@/components/TopNav.vue";

export default defineComponent({
	name: 'HomeView',
	components: {
		G__TopNav,
		// HelloWorld
		// 异步组件
		// HelloWorld: defineAsyncComponent(() => import("../components/HelloWorld.vue")),
		// HelloWorld: defineAsyncComponent({
		// 	loader: () => import("../components/HelloWorld.vue"),
		// 	delay: 200,
		// 	timeout: 3000,
		// 	errorComponent: () => import("./ErrorComponent.vue"),
		// 	loadingComponent: () => import("./LoadingComponent.vue"),
		// })
	},
	data() {
		return {
			win: undefined as any
		}
	},
	methods: {

		onNotice() {
			const option = {
				title: '网易邮箱',
				body: '网络异常,请检查您的网络'
			};
			const myNotification = new window.Notification(option.title, option);

			myNotification.onclick = function () {
				console.log('点击了');
			}
		},

		openNewWindow() {
			let bilibiliWindow = null;

			bilibiliWindow = new BrowserWindow({width: 1000, height: 800})

			bilibiliWindow.loadURL("https://bilibili.com/");

			bilibiliWindow.on("close", function () {
				console.log('close')
				bilibiliWindow = null;
			})

		},

		loadFile() {
			this.win = new BrowserWindow({
				width: 400,
				height: 400,
				frame: true,
				title: '测试', // 会被页面中的title覆盖
				fullscreen: false, //是否全屏显示
			});

			const winURL = process.env.NODE_ENV === 'development'
				? `http://localhost:8181`
				: `file://${__dirname}`

			this.win.loadURL(`${winURL}/test.html`);
			// 这种方式打包之后是不能打开的
			this.win.on('closed', () => {
				this.win = null;
				console.log('this close')
			})
		},

		openVue() {
			ipcRenderer.send('openCalendarWindow', 123); // 通知主进程打开窗口

			// const winURL = process.env.NODE_ENV === 'development'
			// 	? `http://localhost:8181`
			// 	: `app://./index.html`
			//
			// const newWin = new BrowserWindow({
			// 	width: 900,
			// 	height: 620,
			// 	minWidth: 900,
			// 	minHeight: 620,
			// 	frame: true, //是否显示边缘框
			// 	fullscreen: false, //是否全屏显示
			// 	title: "项目名",
			// 	// autoHideMenuBar: true
			// 	webPreferences: {
			// 		nodeIntegration: true, // 允许渲染进程使用node
			// 		contextIsolation: false
			// 	}
			// })
			//
			// newWin.loadURL(winURL+'#/test_hello')
		},

		test2() {
			ipcRenderer.send('test', 123); // 通知主进程打开窗口
		},

		onContextmenu() {
			ipcRenderer.send('show-context-menu');
		},

		open2() {
			ipcRenderer.send('open');
		},

	},

	mounted() {
		ipcRenderer.on('context-menu-command', (e, command) => {
			console.group('context-menu-command');
			console.log('ipcRenderer')
			console.groupEnd();
		})

		ipcRenderer.on('getAllRender', (e, d) => {
			console.group('getAllRender');
			console.log('d', d)
			console.groupEnd();
		})

		// setTimeout(() => {
		// 	ipcRenderer.send('openCalendarWindow', 123); // 通知主进程打开窗口
		// }, 10000)

	},

})
</script>

<style lang="less" scoped>
.x {
	color: green;
}

.home {
	border: 1px red solid;
}
</style>
